Summary

This PR introduces a workaround to solve the issue #7222, the following updates to the EuiModal and EuiModalHeader components, in addition to adjustments in the tests and styles moved based on the changed components.

1. EuiModal Enhancements:

   • Added a mechanism to pass onClose down to children that accept it.
   • Refactored children processing to enhance each child with the onClose prop if applicable.

2. EuiModalHeader Enhancements:

   • Added a onClose prop to support closing the modal directly from the header.
   • Introduced a close button (EuiButtonIcon) with proper accessibility (aria-label), now this close button is under the title, so it'll be annouce after.

Changes in modal.tsx

• Type Addition: Introduced ChildWithOnClose type to ensure children accepting onClose are type-safe.
• Enhanced Children: Utilized React.Children.map and React.cloneElement to inject onClose prop into child components.
• Removed Close Icon: Responsibility for the close button is shifted to EuiModalHeader.

Changes in modal_header.tsx

• Close Button: Added a close button using EuiButtonIcon with styles and localization via EuiI18n.
• onClose Prop: Introduced onClose prop to facilitate parent-driven close behavior.

Detailed Changes

modal.tsx

const enhancedChildren = React.Children.map(children, (child) => {
  if (React.isValidElement(child)) {
    return React.cloneElement(child as ChildWithOnClose, { onClose });
  }
  return child;
});

• This ensures that any child capable of handling onClose will receive it automatically, making the component more flexible.

modal_header.tsx

<EuiI18n
  token="euiModalHeader.closeModal"
  default="Closes this modal window"
>
  {(closeModal: string) => (
    <EuiButtonIcon
      iconType="cross"
      css={cssCloseIconStyles}
      className="euiModal__closeIcon"
      color="text"
      onClick={onClose}
      aria-label={closeModal}
    />
  )}
</EuiI18n>

• modal.tsx and modal_header.tsx styles were affected only to match reallocated code.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)